<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./QQmusic.css" type="text/css" />
</head>
<body>

    <!-- 右下小框 -->
    <div id="youxiajiaosanbaotai">
        <div id="sanjiao"><img src="./images/shang.png" alt=""></div>
        <div id="fankui"><h4>反馈</h4></div>
        <div id="xiaobofang"><img src="./images/xiaobofang.png" alt=""></div>
    </div>



    <!-- 页面头部 -->
    <div class="header">
        <!--网页头部:网页Logo,相关联网站-->
        <div class="WebHeader">
            <img src="./images/logo.png" class="LOGO" alt="">
            <a href="#" class="WebTitle WebTitleSelect">音乐馆</a>
            <a href="#" class="WebTitle">我的音乐</a>
            <a href="#" class="WebTitle">客户端</a>
            <a href="#" class="WebTitle">开放平台</a>
            <a href="#" class="WebTitle">VIP</a>
            <div class="Search">
                <input type="text">
                <img src="./images/serach.png" alt="">
            </div>
            <a href="#" class="loginBtn">登录</a>
            <a href="#" class="OpenVIP">开通VIP</a>
            <a href="#" class="InMoney">充值</a>
        </div>

        <ul class="WebNav">
            <li>首页</li>
            <li>歌手</li>
            <li>新碟</li>
            <li>排行榜</li>
            <li>分类歌单</li>
            <li>电台</li>
            <li>MV</li>
            <li>数字专辑</li>
            <li>票务</li>

        </ul>
    </div>

    <!-- 页面内容 -->
    <div class="content">

        <div class="tuijian">
            <h3>新歌首发</h3>
            <ul class="subtitle2">
                <li>最新</li>
                <li>内地</li>
                <li>港台</li>
                <li>欧美</li>
                <li>韩国</li>
                <li>日本</li>
            </ul>

            <ul class="list">
                <li>
                    <div class="tuijian_img">
                    <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <div class="cover"></div>
                    <div class="circle_1">
                        <div class="trangle"></div>
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                <li>
                    <div class="tuijian_img">
                        <img src="./images/p7.png" alt="图片" class="itmeImage">
                    </div>
                    <div class="cover"></div>
                    <div class="circle_1">
                        <div class="trangle"></div>
                    </div>
                    <h4 class="title"> 站内弹幕999+的欧美节奏曲 </h4>
                    <div class="des">播放量：1139.2万 </div></li>
                <li>
                    <div class="tuijian_img">
                    <img src="./images/p3.png" alt="图片" class="itmeImage">
                    </div>
                    <div class="cover"></div>
                    <div class="circle_1">
                        <div class="trangle"></div>
                    </div>
                    <h4 class="title">短视频收藏量100w+DJ热歌合集</h4>
                    <div class="des">播放量：1323.9万 </div></li>
                <li>
                    <div class="tuijian_img"><img src="./images/p4.png" alt="图片" class="itmeImage"></div>
                    <div class="cover"></div>
                    <div class="circle_1">
                        <div class="trangle"></div>
                    </div>
                    <h4 class="title"> 『极致欧美神曲』为生活注入色彩 </h4>
                    <div class="des">播放量：73.5万 </div></li>
                <li>
                    <div class="tuijian_img"><img src="./images/p5.png" alt="图片" class="itmeImage"></div>
                    <div class="cover"></div>
                    <div class="circle_1">
                        <div class="trangle"></div>
                    </div>
                    <h4 class="title"> 伤感：要有多坚强，才敢念念不忘 </h4>
                    <div class="des">播放量：119.2万 </div></li>
            </ul>
        </div>



        <div class="NewSong">
            <h3>新歌首发</h3>
            <ul class="subtitle2">
                <li>最新</li>
                <li>内地</li>
                <li>港台</li>
                <li>欧美</li>
                <li>韩国</li>
                <li>日本</li>
            </ul>

            <div class="NewsongList">
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic3.jpg">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">乘风中国汽车风云盛典主题曲</div>
                    <div class="note2">孙楠</div>
                    <div class="note3">04:37</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic4.jpg">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">人生不能没副歌</div>
                    <div class="note2">Ella陈嘉桦</div>
                    <div class="note3">03:37</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic5.jpg">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">无人知晓</div>
                    <div class="note2">田馥甄</div>
                    <div class="note3">04:48</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic6.jpg">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">许无忧《浮世双娇传》网剧片尾</div>
                    <div class="note2">李治廷</div>
                    <div class="note3">05:37</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic7.png">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">forget me too</div>
                    <div class="note2">Machine Gun Kelly / Halsey</div>
                    <div class="note3">02:17</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic8.png">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">Wild Life</div>
                    <div class="note2">OneRepublic</div>
                    <div class="note3">04:21</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic9.png">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">Pa Ti</div>
                    <div class="note2">Jennifer Lopez / Maluma</div>
                    <div class="note3">03:37</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic5.jpg">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">戏奉先</div>
                    <div class="note2">音阙诗听 / 蔡翊昇</div>
                    <div class="note3">02:51</div>
                </div>
                <div class="SongShows">
                    <div class="NewSong_img">
                    <img src="./images/pic6.jpg">
                    </div>
                    <div class="cover_newsong">
                        <div class="circle_newsong"></div>
                        <div class="trangle_newsong"></div>
                    </div>
                    <div class="note1">乘风中国汽车风云盛典主题曲</div>
                    <div class="note2">孙楠</div>
                    <div class="note3">04:37</div>
                </div>
            </div>
        </div>



        <div class="jingcai">
            <h1 class="title">精彩推荐</h1>
            <div class="shows">
                <ul class="imgs">
                    <li class="showimg">
                        <img src="./images/p1.png" alt="图片">
                    </li>
                    <li class="showimg">
                        <img src="./images/p2.png" alt="图片">
                    </li>
                </ul>
            </div>
            <div class="tiao">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>



        <div class="xindie">
            <h3>新歌首发</h3>
            <ul class="subtitle2">
                <li>最新</li>
                <li>内地</li>
                <li>港台</li>
                <li>欧美</li>
                <li>韩国</li>
                <li>日本</li>
            </ul>

            <ul class="list">
                <li>
                    <div class="xindie_img">
                    <div class="xindie_cover">
                        <div class="xindie_trangle"></div>
                    </div>
                    <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
                <li>
                    <div class="xindie_img">
                        <div class="xindie_cover">
                            <div class="xindie_trangle"></div>
                        </div>
                        <img src="./images/p6.png" alt="图片" class="itmeImage">
                    </div>
                    <h4 class="title"> 李宗盛：不懂是幸运，听懂是人生 </h4>
                    <div class="des">播放量：428.1万 </div></li>
                </li>
            </ul>
        </div>




        <div class="rank">
            <h3>排行榜</h3>
            <div class="ranktext">
                <div class="ranklist">
                    <div class="quare"></div>
                    <div class="ranktitle">
                        <p class="p1">巅峰榜</p>
                        <p class="p2">热歌</p>
                    </div>

                    <div class="rank_play">
                        <div class="rank_cover">
                            <div class="rank_trangle"></div>
                        </div>
                    </div>


                    <ol>
                        <li>
                            <div class="rankbox1 rankbox">
                                <p class="lip">1.永不失联的爱 (Live</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;单依纯</p>
                            </div>
                            <div class="rankbox2 rankbox">
                                <p class="lip">2.厚颜无耻</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;曲肖冰</p>
                            </div>
                            <div class="rankbox3 rankbox">
                                <p class="lip">3.飞鸟和蝉</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;任然</p>
                            </div>
                        </li>
                    </ol>
                </div>

                <div class="ranklist" style="background-color: #3fc999">
                    <div class="quare"></div>
                    <div class="ranktitle">
                        <p class="p1">巅峰榜</p>
                        <p class="p2">热歌</p>
                    </div>

                    <div class="rank_play">
                        <div class="rank_cover">
                            <div class="rank_trangle"></div>
                        </div>
                    </div>

                    <ol>
                        <li>
                            <div class="rankbox1 rankbox">
                                <p class="lip">1.永不失联的爱 (Live</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;单依纯</p>
                            </div>
                            <div class="rankbox2 rankbox">
                                <p class="lip">2.厚颜无耻</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;曲肖冰</p>
                            </div>
                            <div class="rankbox3 rankbox">
                                <p class="lip">3.飞鸟和蝉</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;任然</p>
                            </div>
                        </li>
                    </ol>
                </div>
                <div class="ranklist" style="background-color: #d77d29">
                    <div class="quare"></div>
                    <div class="ranktitle">
                        <p class="p1">巅峰榜</p>
                        <p class="p2">热歌</p>
                    </div>

                    <div class="rank_play">
                        <div class="rank_cover">
                            <div class="rank_trangle"></div>
                        </div>
                    </div>

                    <ol>
                        <li>
                            <div class="rankbox1 rankbox">
                                <p class="lip">1.永不失联的爱 (Live</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;单依纯</p>
                            </div>
                            <div class="rankbox2 rankbox">
                                <p class="lip">2.厚颜无耻</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;曲肖冰</p>
                            </div>
                            <div class="rankbox3 rankbox">
                                <p class="lip">3.飞鸟和蝉</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;任然</p>
                            </div>
                        </li>
                    </ol>
                </div>
                <div class="ranklist" style="background-color: plum">
                    <div class="quare"></div>
                    <div class="ranktitle">
                        <p class="p1">巅峰榜</p>
                        <p class="p2">热歌</p>
                    </div>

                    <div class="rank_play">
                        <div class="rank_cover">
                            <div class="rank_trangle"></div>
                        </div>
                    </div>

                    <ol>
                        <li>
                            <div class="rankbox1 rankbox">
                                <p class="lip">1.永不失联的爱 (Live</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;单依纯</p>
                            </div>
                            <div class="rankbox2 rankbox">
                                <p class="lip">2.厚颜无耻</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;曲肖冰</p>
                            </div>
                            <div class="rankbox3 rankbox">
                                <p class="lip">3.飞鸟和蝉</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;任然</p>
                            </div>
                        </li>
                    </ol>
                </div>
                <div class="ranklist" style="background-color: deepskyblue">
                    <div class="quare"></div>
                    <div class="ranktitle">
                        <p class="p1">巅峰榜</p>
                        <p class="p2">热歌</p>
                    </div>

                    <div class="rank_play">
                        <div class="rank_cover">
                            <div class="rank_trangle"></div>
                        </div>
                    </div>

                    <ol>
                        <li>
                            <div class="rankbox1 rankbox">
                                <p class="lip">1.永不失联的爱 (Live</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;单依纯</p>
                            </div>
                            <div class="rankbox2 rankbox">
                                <p class="lip">2.厚颜无耻</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;曲肖冰</p>
                            </div>
                            <div class="rankbox3 rankbox">
                                <p class="lip">3.飞鸟和蝉</p>
                                <p class="lip">&nbsp;&nbsp;&nbsp;任然</p>
                            </div>
                        </li>
                    </ol>
                </div>
            </div>
        </div>


        <div class="MV">
            <h3>新歌首发</h3>
            <ul class="subtitle2">
                <li>最新</li>
                <li>内地</li>
                <li>港台</li>
                <li>欧美</li>
                <li>韩国</li>
                <li>日本</li>
            </ul>


            <div class="MVList">
                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <P class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</P>
                    <P class="MV_title2">龚琳娜</P>
                    <P class="MV_title3">3871播放</P>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>

                <div class="MV_BOX">
                    <div class="MV_img">
                        <div class="MV_cover">
                            <div class="MV_trangle"></div>
                        </div>
                        <img src="./images/MV1.png">
                    </div>
                    <div class="MV_title1">拐弯 (QQ飞车一路向黔主题曲)</div>
                    <div class="MV_title2">龚琳娜</div>
                    <div class="MV_title3">3871播放</div>
                </div>
            </div>


        </div>
    </div>


    <!-- 固定菜单 -->
    <div class="menu">
        <div class="tip"><img src="./images/logo.png"></div>
        <div class="desc">千万高品质乐库尽享</div>
        <div class="dload">客户端下载</div>
    </div>


    <!-- 页面尾部 -->
    <div class="footer">
        <div class="product">
            <dl class="download">

                <dt>下载QQ音乐客户端</dt>
                <dd>
                    <div class="platform">
                        <div class="demo1 demo"></div>
                        <div class="name">PC版</div>
                    </div>
                    <div class="platform">
                        <div class="demo2 demo"></div>
                        <div class="name">Mac版</div>
                    </div>
                    <div class="platform">
                        <div class="demo3 demo"></div>
                        <div class="name">Android版</div>
                    </div>
                    <div class="platform">
                        <div class="demo4 demo"></div>
                        <div class="name">Iphone</div>
                    </div>
                </dd>
            </dl>
            <dl class="download">
                <dt>特色</dt>
                <dd>
                    <div class="platform2">
                        <div class="demo5 demo" style="margin-left: 22px"></div>
                        <div class="name">全民K歌</div>
                    </div>
                    <div class="platform2">
                        <div class="demo6 demo" style="margin-left: 25px"></div>
                        <div class="name">Super Sound</div>
                    </div>
                    <div class="platform2">
                        <div class="demo7 demo"></div>
                        <div class="name">QPlay</div>
                    </div>
                    <div class="platform2">
                        <div class="demo8 demo" style="margin-left: 17px"></div>
                        <div class="name">Fan直播伴侣</div>
                    </div>
                </dd>

            </dl>
            <dl class="team">
                <dt>合作链接</dt>
                <dd>
                    <div class="teamitem">CJENM</div>
                    <div class="teamitem">腾讯视频</div>
                    <div class="teamitem">手机QQ空间</div>
                    <div class="teamitem">最新版QQ</div>
                    <div class="teamitem">腾讯社交广告</div>
                    <div class="teamitem">电脑管家</div>
                    <div class="teamitem">QQ浏览器</div>
                    <div class="teamitem">腾讯微云</div>
                    <div class="teamitem">腾讯云</div>
                    <div class="teamitem">企鹅FM</div>
                    <div class="teamitem">智能电视网</div>
                    <div class="teamitem">当贝市场</div>
                </dd>
            </dl>
        </div>
        <div class="OpenPlatform">
            <div class="txt d1">开放平台</div>
            <div class="txt d2">TME集团官网</div>
            <div class="txt d3">QQ音乐开放平台</div>
            <div class="txt d4">腾讯音乐人</div>
            <div class="txt d5">腾讯音乐</div>
        </div>
        <div class="copyright"></div>
    </div>
</body>

<script>
    // 1、获取按钮元素
    var topBtn = document.getElementById('sanjiao');
    var timer;//设置时间标识符
    // 2、绑定点击事件
    topBtn.onclick = function(){
        timer = setInterval(function(){
            //功能代码块
            //获取滚动条距离页面顶部的间隙/位置
            var to_top_value = document.body.scrollTop || document.documentElement.scrollTop;
            console.log(to_top_value)
            //减速带
            var speed_value = Math.floor(-to_top_value/20);
            //判断滚动条到顶部后清除定时器
            if(to_top_value <= 0){
                clearInterval(timer)
            }
            //每次点击时往上走10px
            document.body.scrollTop = document.documentElement.scrollTop = to_top_value + speed_value;
        },10)
    }
    // 3、监听滚动条
    window.onscroll = function(){
        var to_top_value = document.body.scrollTop || document.documentElement.scrollTop;
        if(to_top_value>=300){
            topBtn.style.display = 'block'
        }else{
            topBtn.style.display = 'none'
        }
    }
</script>
</html>